<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打卡数据</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="demoTable">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 40px">学号:</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="id" id="userId" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 40px">姓名:</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="name" id="name" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 40px">学院:</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="school" id="school" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 40px">班级:</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="class" id="class" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 70px">联系方式:</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="phone" id="phone" autocomplete="off">
            </div>
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>


</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="/layui/layui.js" charset="utf-8"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<!-- 注意：th:inline="none"-->
<script>
    var laydate = layui.laydate;
    //常规用法
    laydate.render({
        elem: '#date'
    });

    layui.use('table', function(){
        var table = layui.table;
        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            elem: '#test'
            ,url:'http://81.69.13.22:8080/admin/findNotClockPerson'
            ,parseData: function(res) { //res 即为原始返回的数据
                token = res.token;
            }
            // ,where: {token: token} //如果无需传递额外参数，可不加该参数
            ,request: {
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'limit' //每页数据量的参数名，默认：limit
            }
            ,toolbar: '#toolbarDemo'
            ,title: '打卡信息表'
            ,totalRow: true
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'recordId', hide:true, title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                    ,{field:'userId', title:'学号', width:150,  sort: true}
                    ,{field:'name', title:'姓名', width:150, }
                    ,{field:'school', title:'所属学院', width:150, }
                    ,{field:'clas', title:'所在班级', width:150, }
                    ,{field:'phone', title:'联系电话', width:150, }
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]
            ]
            ,page: true
            ,id: 'testReload'
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                console.log(obj)
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);

                });
            } else if(obj.event === 'edit'){
                layer.open({
                    title: '修改记录信息',
                    type: 1,
                    area: ['700px','400px'],
                    content:
                        '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' +
                        '<form class="layui-form" method="post" > ' +
                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">学号</label>' +
                        '<div class="layui-input-inline">' +
                        '<input id="userIdEdit" disabled="true" type="text" required lay-verify="required" name="id" class="layui-input" placeholder='+data.userId+' value="" >' +
                        '</div></div>' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">姓名</label>' +
                        '<div class="layui-input-inline">' +
                        '<input id="nameEdit" type="text" required lay-verify="required" name="name"  class="layui-input" value='+data.name+' >' +
                        '</div></div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">所属学院</label>' +
                        '<div class="layui-input-inline">' +
                        '<input id="schoolEdit" type="text" required lay-verify="required" name="date" class="layui-input" value='+data.school+' value="" >' +
                        '</div></div>' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">所属班级</label>' +
                        '<div class="layui-input-inline">' +
                        '<input id="classEdit" type="text" required lay-verify="required" name="phone"  class="layui-input" value='+data.clas+' >' +
                        '</div></div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">联系电话</label>' +
                        '<div class="layui-input-inline">' +
                        '<input id="phoneEdit" type="text" required lay-verify="required" name="temperature" class="layui-input" value='+data.phone+' >' +
                        '</div></div>' +
                        '</form>',btnAlign: 'c',btn: ['确定','取消'],yes: function (res) {
                        var userId = $('#userIdEdit').val()
                        var name = $('#nameEdit').val()
                        var school = $('#schoolEdit').val()
                        var clas = $('#classEdit').val()
                        var phone = $('#phoneEdit').val()
                        $(function (){
                            $.ajax({
                                'url':'http://81.69.13.22:8080/admin/editUser',
                                'type':'GET',
                                'data':{
                                    'userId':data.userId,
                                    'name':name,
                                    'school':school,
                                    'clas':clas,
                                    'phone':phone
                                },
                                'success':function (res){
                                    //重新加载表格数据
                                    location.reload()
                                }
                            })
                        })

                    }
                });
            }
        });



        var $ = layui.$, active = {
            reload: function(){
                var userId = $('#userId');
                var name = $('#name');
                var school = $('#school');
                var clas = $('#class');
                var phone = $('#phone');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: userId.val(),
                            name:name.val(),
                            school:school.val(),
                            clas:clas.val(),
                            phone:phone.val(),
                        }
                    }
                });
            }
        };




        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });


</script>

</body>
</html>